<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 校园历史文化数字地图</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 自定义样式 -->
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/media/樱花大道.webp');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            text-align: center;
        }
        .card {
            transition: transform 0.3s;
            height: 100%;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .footer {
            background-color: #343a40;
            color: white;
            padding: 20px 0;
            margin-top: 30px;
        }
        .feature-icon {
            font-size: 3rem;
            color: #0d6efd;
        }
        .btn-primary {
            background-color: #0d6efd;
            border: none;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
        }
        .section-title {
            position: relative;
            margin-bottom: 30px;
            padding-bottom: 15px;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #0d6efd;
        }
        .timeline {
            position: relative;
            padding: 20px 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            height: 100%;
            width: 4px;
            background: #0d6efd;
            left: 50%;
            transform: translateX(-50%);
        }
        .timeline-item {
            margin-bottom: 50px;
            position: relative;
            width: 50%;
        }
        .timeline-item:nth-child(odd) {
            left: 0;
            padding-right: 40px;
            text-align: right;
        }
        .timeline-item:nth-child(even) {
            left: 50%;
            padding-left: 40px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: #0d6efd;
            border-radius: 50%;
            top: 0;
        }
        .timeline-item:nth-child(odd)::before {
            right: -10px;
        }
        .timeline-item:nth-child(even)::before {
            left: -10px;
        }
        .timeline-content {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        @media (max-width: 768px) {
            .timeline::before {
                left: 20px;
            }
            .timeline-item {
                width: 100%;
                padding-left: 50px !important;
                padding-right: 0 !important;
                text-align: left !important;
            }
            .timeline-item::before {
                left: 10px !important;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-map"></i> 校园历史文化数字地图
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/about">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin">管理入口</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="hero-section">
        <div class="container">
            <h1 class="display-4 fw-bold">关于我们</h1>
            <p class="lead">致力于记录和传播校园历史文化，让更多人了解和珍视这些宝贵的文化遗产</p>
        </div>
    </div>

    <!-- 项目介绍 -->
    <div class="container my-5">
        <div class="row">
            <div class="col-lg-6 mb-4">
                <h2 class="section-title">项目背景</h2>
                <p>校园历史文化数字地图项目始于2023年，旨在通过数字化手段记录、保护和传播校园丰富的历史文化遗产。随着时代的发展，许多具有历史意义的建筑和地点面临着被遗忘的风险，我们希望通过这个平台，让更多人了解和珍视这些宝贵的文化遗产。</p>
                <p>项目团队由历史学者、信息技术专家和校园文化爱好者组成，共同致力于打造一个全面、准确、生动的校园历史文化数字平台。</p>
            </div>
            <div class="col-lg-6 mb-4">
                <h2 class="section-title">项目目标</h2>
                <ul class="list-unstyled">
                    <li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>全面记录校园内的历史建筑和文化地标</li>
                    <li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>设计多条文化路线，方便游客和师生体验校园文化</li>
                    <li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>提供多媒体内容，包括图片、音频和视频介绍</li>
                    <li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>开发移动应用，支持随时随地访问和导航</li>
                    <li class="mb-3"><i class="bi bi-check-circle-fill text-success me-2"></i>建立互动社区，鼓励用户分享和贡献内容</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 项目历程 -->
    <div class="container my-5 py-4 bg-light">
        <h2 class="text-center mb-4">项目历程</h2>
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-content">
                    <h5>项目启动</h5>
                    <p class="text-muted">2025年9月</p>
                    <p>项目正式立项，组建核心团队，确定项目目标和范围。</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <h5>资料收集</h5>
                    <p class="text-muted">2025年9月</p>
                    <p>开始全面收集校园历史资料，包括文献、图片和口述历史。</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <h5>平台开发</h5>
                    <p class="text-muted">2025年9月</p>
                    <p>启动平台开发工作，包括前端界面、后端系统和数据库设计。</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <h5>测试优化</h5>
                    <p class="text-muted">2025年9月</p>
                    <p>进行内部测试和用户反馈收集，不断优化平台功能和用户体验。</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <h5>正式上线</h5>
                    <p class="text-muted">2025年12月</p>
                    <p>平台正式上线运行，向公众开放访问，并持续更新和丰富内容。</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 价值观 -->
    <div class="container my-5 py-4 bg-light">
        <h2 class="section-title">我们的价值观</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="text-center">
                    <i class="bi bi-book feature-icon"></i>
                    <h4>学术严谨</h4>
                    <p>我们坚持学术研究的严谨性，确保所有历史资料的准确性和可靠性。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center">
                    <i class="bi bi-people feature-icon"></i>
                    <h4>开放共享</h4>
                    <p>我们相信知识应该被广泛传播，平台内容对所有人开放，鼓励共享和交流。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center">
                    <i class="bi bi-heart feature-icon"></i>
                    <h4>文化传承</h4>
                    <p>我们致力于保护和传承校园历史文化，让这些宝贵的遗产得以延续。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 联系我们 -->
    <div class="container my-5">
        <h2 class="section-title">联系我们</h2>
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">项目办公室</h5>
                        <p class="card-text"><i class="bi bi-geo-alt me-2"></i>地址：武汉大学信息学部七舍</p>
                        <p class="card-text"><i class="bi bi-telephone me-2"></i>电话：18271112105</p>
                        <p class="card-text"><i class="bi bi-envelope me-2"></i>邮箱：3332732443@qq.com</p>
                        <p class="card-text"><i class="bi bi-clock me-2"></i>工作时间：周一至周五 9:00-17:00</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">在线反馈</h5>
                        <form>
                            <div class="mb-3">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
                            </div>
                            <div class="mb-3">
                                <label for="message" class="form-label">留言</label>
                                <textarea class="form-control" id="message" rows="3" placeholder="请输入您的留言"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">提交反馈</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5>校园历史文化数字地图</h5>
                    <p>致力于记录和传播校园历史文化，让更多人了解和珍视这些宝贵的文化遗产。</p>
                </div>
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <p><i class="bi bi-envelope"></i>：3332732443@qq.com</p>
                    <p><i class="bi bi-telephone"></i>：18271112105</p>
                </div>
            </div>
            <hr class="mt-4 mb-4" style="background-color: rgba(255,255,255,0.1);">
            <div class="text-center">
                <p class="mb-0">&copy; 2025 校园历史文化数字地图. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
